<template>
  <div>
    <van-nav-bar title="扫码" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="scan">
      <div id="bcid">
        <div style="height:40%"></div>
        <p class="tip">...载入中...</p>
      </div>
    </div>
    <van-popup v-model="show">
      <div class="getUrl">
        <p id="copyNum">{{codeUrl}}</p>
        <textarea id="copyWord"></textarea>
        <p @click="copys">点击复制</p>
      </div>
    </van-popup>
  </div>
</template>

<script type='text/ecmascript-6'>

import { Popup, Toast , NavBar } from "vant";
let scan = null;
export default {
  data() {
    return {
      codeUrl: "",
      show: false
    };
  },
  created() {

  },
  mounted() {
    this.startRecognize();
    this.startScan();
    
  },
  components: {
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [NavBar.name]: NavBar
  },
  methods: {
    bnbn(){
      var lala = document.getElementById('bcid')
      lala.style.display = 'none'
    },
    //返回
    goBack() {
      this.closeScan();
      this.$router.go(-1);
    },
    //点击复制
    copys() {
      var num = document.getElementById("copyNum").innerHTML;
      var word = document.getElementById("copyWord");
      word.value = num;
      word.select();
      document.execCommand("copy");
      this.$toast("复制成功！");
      this.$router.go(-1);
    },
    //创建扫描控件
    startRecognize() {
      let that = this;
      if (!window.plus) return;
      scan = new plus.barcode.Barcode("bcid");
      scan.onmarked = onmarked;

      function onmarked(type, result, file) {
        switch (type) {
          case plus.barcode.QR:
            type = "QR";
            break;
          case plus.barcode.EAN13:
            type = "EAN13";
            break;
          case plus.barcode.EAN8:
            type = "EAN8";
            break;
          default:
            type = "其它" + type;
            break;
        }
        result = result.replace(/\n/g, "");
        that.codeUrl = result;
        that.show = true;
        that.closeScan();
      }
    },
    //开始扫描
    startScan() {
      if (!window.plus) return;
      scan.start();
    },
    //关闭扫描
    cancelScan() {
      if (!window.plus) return;
      scan.cancel();
    },
    //关闭条码识别控件
    closeScan() {
      if (!window.plus) return;
      scan.close();
    }
  }
};
</script>
<style lang="less" scoped>
.scan {
  height: 100%;
  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: #ccc;
    z-index: 888;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
  }
}

#copyWord {
  opacity: 0;
  position: fixed;
  left: -120%;
  height: -120%;
}
.getUrl {
  width: 200px;
  margin: 0 auto;
  z-index: 999;
  border: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fff;
  border-radius: 10px;
  p:nth-child(1) {
    margin-bottom: 20px;
    background-color: #999;
    padding: 4px 10px;
    box-sizing: border-box;
    color: #fff;
  }
}
</style>